﻿

@{
    string jsonLatestBikes = ViewBag.LatestBikes;
}

<!DOCTYPE html>
<html data-ng-app="bikeFindr">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="Find stolen bike, tomekz.pl" name="description">
        <meta content="Tomasz Zadrożny" name="author">
        @Styles.Render("~/Content/css")
        <!--[if lt IE 9]>
            <script src="~/Scripts/libs/html5shiv.js"></script>
            <script src="~/Scripts/libs/respond.min.js"></script>
         <![endif]-->
    </head>
    <body>
        
        <div class="container" data-ng-controller="bikesController">
            
            <div id="banner" class="page-header">
                <div class="row">
                    <div class="col-md-6">
                        <h1>BikeFindr</h1>
                        <p class="lead">Find your stolen bike</p>
                    </div>
                </div>
            </div>  
            
            <div class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <button data-target=".navbar-responsive-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse navbar-responsive-collapse">
                        <ul class="nav navbar-nav">                 
                            <li><a href="#" data-ng-class="getNavLinkClass('/')" >Search</a></li>
                            <li><a href="#/advancedSearch" data-ng-class="getNavLinkClass('/advancedSearch')" >Advanced search</a></li>
                            <li><a href="#/contact" data-ng-class="getNavLinkClass('/contact')">Contact</a></li>
                            <li><a href="#/terms" data-ng-class="getNavLinkClass('/terms')">Terms of use</a></li>

                        </ul>
                            <ul class="nav navbar-nav navbar-right">
                                <li class="dropdown">
                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                        <span class="icon-stack">
                                             <i class="icon-flag-alt"></i>  
                                        </span> Select language <b class="caret"></b>
                                    </a>                                       
                                    <ul class="dropdown-menu">
                                        <li><a href="#" >En</a></li>
                                    </ul>
                                </li>
                           </ul>
                        </div>
                </div>
            </div>
           
            <div class="row ">
                 <div class="col-md-8">
                    <section>
                        @RenderBody()
                    </section>
                 </div>
                 <div  id="sidebar" class="col-md-4">  
                     <div class="panel panel-default ">
                         <div class="panel-heading" >
                             <span class="icon-stack">
                                 <i class="icon-lightbulb" ></i>
                             </span>
                             How this works?
                         </div>
                         <div class="panel-body">
                             <p class="list-group-item-text">Search for your stolen bike here. </p> <br/>
                             <p class="list-group-item-text"> The search engine scans most popular polish auction platforms including
                                 <strong>Allegro.pl</strong> and <strong>Tablica.pl</strong> where thieves could be trying to sell it.
                             </p><br/>
                             <p class="list-group-item-text"><a href="#terms">Please read the terms of use</a></p>
                         </div> 
                     </div>
                     <div class="panel panel-default ">
                         <div class="panel-heading" >
                             <span class="icon-stack">
                                 <i class="icon-stack-base "></i>
                                 <i class="icon-bullhorn" ></i>
                             </span>Latest bikes
                         </div>
                         <div class="panel-body" data-ng-init ="latestBikes = @jsonLatestBikes">
                                <div class="col-xs-6 col-md-6 thumbnail-border" data-ng-repeat="bike in latestBikes">
                                  <a class="thumbnail" href="{{ bike.Url }}" target="_blank">
                                   <img data-ng-src="{{ bike.SmallestThumbnailUrl }}" alt="" />
                                   
                                  </a>
                                </div>
                         </div> 
                     </div>
                     <div class="panel panel-default ">
                                    <div class="panel-heading" >
                                          <span class="icon-stack">
                                          <i class="icon-stack-base "></i>
                                          <i class="icon-comments" ></i>
                                        </span>Disqus
                                    </div>
                                   <div class="panel-body">
                                        @Html.Partial("Disqus")
                                   </div> 
                          </div>
                </div>
            </div> 
            <hr />
            <footer>
                <p><span class="label label-primary">© BikeFindr 2013</span></p>
            </footer>
        
        </div>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/init")
        @RenderSection("scripts", required: false)
         
    </body>
</html>
